<template>
  <div class="retrieve-password">
    <div class="content-title">
      <span class="password">{{ $t("module.userCenter.retrieveQassword") }}</span>
      <Icon class="iconClose" @click="iconClose" type="ios-close" size="40" />
    </div>
    <div class="content-main">
      <div class="hint">{{ $t("module.userCenter.passwordWay") }}</div>
      <div class="retrieve-type" v-if="!!mobile">
        <div>
          <Icon type="ios-phone-portrait" size="80" />
        </div>
        <div class="remark">
          {{ $t("module.userCenter.throughPhone") }} {{ mobile }} {{ $t("module.userCenter.retrieveQassword") }}
        </div>
        <div class="retrieve-vail">
          <RPButton @click="next(1)" :text="$t('module.userCenter.immediatelyVerify')" />
        </div>
      </div>
      <div class="retrieve-type" v-if="!!email">
        <div>
          <Icon type="ios-mail" size="80" />
        </div>
        <div class="remark">
          {{ $t("module.userCenter.throughMail") }} {{ email }} {{ $t("module.userCenter.retrieveQassword") }}
        </div>
        <div class="retrieve-vail">
          <RPButton @click="next(2)" :text="$t('module.userCenter.immediatelyVerify')" />
        </div>
      </div>
    </div>
    <div class="content-button">
      <RPButton
        size="large"
        optType="text"
        long
        style="borderradius: 0; height: 34px;"
        @click="stepButton"
        :text="$t('module.userCenter.step')"
      />
    </div>
  </div>
</template>
<script>
import userCenter from "@lang/modules/userCenter";
export default {
  name: "retrieve-password",
  components: {},
  locales: {
    "zh-CN": {
      module: {
        userCenter: userCenter["zh-CN"]
      }
    },
    "en-US": {
      module: {
        userCenter: userCenter["en-US"]
      }
    }
  },
  props: {},
  data() {
    return {
      mobile: "",
      email: "",
      tenant: null
    };
  },
  computed: {},
  created: function() {
    // console.log(this.$route.params);
    if (this.$route.params.account) {
      this.init(this.$route.params);
    } else {
      this.$router.push({
        name: "enter-account"
      });
    }
  },
  beforeMount: function() {},
  mounted: function() {},
  beforeDestroy: function() {},
  destroyed: function() {},
  methods: {
    init({ account, tenant, mobile, email }) {
      this.mobile = mobile;
      this.email = email;
      this.tenant = tenant;
    },
    next(type) {
      if (type == 1) {
        this.$router.push({
          name: "validate-phone",
          // params: { mobile: this.mobile, tenant: this.tenant }
          params: {...this.$route.params}
        });
      } else {
        this.$router.push({
          name: "validate-email",
          // params: { email: this.email, tenant: this.tenant }
          params: {...this.$route.params}
        });
      }
    },
    stepButton() {
      this.$router.push({ path: "/forgot-password/enter-account" });
    },
    iconClose() {
      const type = window.RPConfig.logintype;
      if (type === "cas") {
        window.location.href = window.RPConfig.cas_logout + "?service=" + window.location.origin;
      } else if (type === "single") {
        this.$router.push({ path: "/login" });
      } else {
        window?.$util?.redirectToLogin()
      }
    }
  },
  watch: {},
  directives: {}
};
</script>
<style lang="less">
.retrieve-password {
  .content-title {
    position: relative;
    .password {
      position: absolute;
      left: 120px;
    }
    .iconClose {
      position: absolute;
      right: 0;
      bottom: 30px;
    }
  }
  .retrieve-type {
    height: 80px;
    margin-bottom: 20px;
    background-color: #f5f5f5;
    border: 1px solid #e8e8e8;
    div {
      display: inline-block;
    }
    .remark {
      width: 240px;
    }
  }
}
.retrieve-vail {
  position: absolute;
  margin-top: 26px;
  margin-left: 10px;
}
</style>
